<template>
  <div class="dashboard-container">
    <div class="dashboard-text">姓名: {{ name }}
    <!-- <el-button @click="go"></el-button> -->
    </div>
    <div style="padding-top: 30px;">
      <el-row>
      <el-col :span="7">
      <el-card 
      :body-style="{'background-image':'url(' + backgroundImg +')','background-size':'70%','background-position':'0 -10px','width':'600px','height':'410px','padding':'0px'}"
      v-loading="cardLoading"
      element-loading-text="拼命加载中"
      >
    <div slot="header" class="clearfix">
      
    <el-tag effect="plain" type="success" style="height: 38px;font-size: small;line-height: 35px;">天气信息</el-tag>
    <el-button icon="el-icon-map-location" circle style="margin-left: 15px;" @click="findLW"></el-button>
    <el-button icon="el-icon-guide" circle style="margin-left: 15px;" @click="isshow"></el-button>
    <el-col :span="10" style="float: right;">
    <el-input
    placeholder="请输入内容"
    v-model="inputLocation"
    size="medium"
    style="margin-top:2px"
    >
    <i slot="suffix" class="el-input__icon el-icon-search" @click="findWeather"></i>
  </el-input>
  </el-col>
        </div>
      <div style="margin-left: 130px;padding: auto;">
      <transition name="fade" enter-active-class="animated animate__backInLeft"><img v-show="show" :src="imgUrl" class="image"></transition>
      <transition name="fade" enter-active-class="animated animate__backInLeft"><h2 style="margin-left: 30px; margin-top: 10px;" v-show="show">{{showLocation}}</h2></transition>
      <transition name="fade" enter-active-class="animated animate__backInLeft"><h3 v-show="show" style="margin-left: 10px">{{weather}} || {{temperature}}℃</h3></transition>
      <transition name="fade" enter-active-class="animated animate__backInLeft"><h3 v-show="show" style="margin-left: 10px">{{windDirection}}风 || {{windPower}}级</h3></transition>
      <transition name="fade" enter-active-class="animated animate__backInLeft"><h3 v-show="show" style="margin-left: 20px">湿度:{{humidity}}%</h3></transition>
      <transition name="fade" enter-active-class="animated animate__backInLeft"><h3 v-show="show" style="margin-left: -20px">{{reportTime}}</h3></transition>
  </div>
    </el-card>
      </el-col>
    <el-col :span="8" style="margin-left: 25px;">
      <el-card :body-style="{'height':'410px'}">
        <div slot="header" class="clearfix">
      
      <el-tag effect="plain" type="success" style="height: 38px;font-size: small;line-height: 35px;">用户信息</el-tag>
        </div>
        <div class="component-item">
          <img :src="avatar+'?imageView2/1/w/80/h/80'" style="margin-left: 150px;">
          </div>
          <div style="margin-left:50px;">
            <transition name="fade" enter-active-class="animated animate__backInLeft" ><h3 style="margin-left: 30px; margin-top: 10px;">用户名：{{name}}</h3></transition>
            <transition name="fade" enter-active-class="animated animate__backInLeft" ><h3 style="margin-left: 30px; margin-top: 10px;">角色：{{userInfo[0].role}}</h3></transition>
            <transition name="fade" enter-active-class="animated animate__backInLeft" ><h3 style="margin-left: 30px; margin-top: 10px;">邮箱：{{userInfo[0].email}}</h3></transition>
            <el-button type="success" style="margin-left: 40px; margin-top: 10px" @click="dialogEmailVisible=true">修改邮箱</el-button>
            <el-button type="success" style="margin-left: 40px; margin-top: 10px" @click="dialogPasswordVisible=true">修改密码</el-button>
          </div>
    </el-card>
    </el-col>

    <el-col :span="8" style="margin-left: 25px;">
      <el-card :body-style="{'height':'410px'}">
        <div slot="header" class="clearfix">
      <el-tag effect="plain" type="success" style="height: 38px;font-size: small;line-height: 35px;">最近订单</el-tag>
        </div>
        <div>
          <el-table
          :data="orderInfo"
          border
          fit
         v-loading="tableLoading">
         <el-table-column label="乘车人" width="70px">
                <template slot-scope="scope">
                    {{ scope.row.passenger_name }}
                </template>
          </el-table-column>
          <el-table-column prop="start_station_name" label="起始站" width="70"></el-table-column>
          <el-table-column  label="座位信息">
                <template slot-scope="scope">
                {{ scope.row.carriage_no}}车厢--{{ seatDetail(scope.row.carriage_no,scope.row.seat_no) }}
                </template>
          </el-table-column>
          <el-table-column width="80" label="发车时间">
                <template slot-scope="scope">
                    {{scope.row.start_time}}
                </template>
            </el-table-column>
          </el-table>
        </div>
    </el-card>
    </el-col>
</el-row>
</div>

  <el-dialog title="天气预报" :visible.sync="dialogFormVisible">
          <el-table
    :data="weatherinfo"
    style="width: 110%"
    border
    >
    <el-table-column
      label="日期"
      width="130px"
     >
     <template slot-scope="scope">
        <i class="el-icon-time"></i>
        <span>{{ scope.row.date }}</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="dayWeather"
      label="白天天气"
      >
    </el-table-column>

    <el-table-column
      label="白天气温"
      >
      <template slot-scope="scope">
        <span>{{ scope.row.dayTemp }}℃</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="nightWeather"
      label="晚间天气"
      >
    </el-table-column>
    <el-table-column
      label="晚间气温"
      >
      <template slot-scope="scope">
        <span>{{ scope.row.nightTemp }}℃</span>
      </template>
    </el-table-column>
    <el-table-column
      prop="dayWindDir"
      label="风向"
      >
    </el-table-column>
    <el-table-column
      prop="dayWindPower"
      label="风力"
      >
    </el-table-column>
  </el-table>
    </el-dialog>

    <el-dialog title="修改密码" :visible.sync="dialogPasswordVisible">
      <el-form :model="form">
    <el-form-item label="验证码" :label-width="formLabelWidth">
      <el-input v-model="form.code" autocomplete="off" style="width: 150px;"></el-input>
      <el-button type="primary" @click="handleCode" v-loading="sendLoading">发送</el-button>
    </el-form-item>
    <el-form-item label="设置新密码" :label-width="formLabelWidth">
     <el-input v-model="form.password" placeholder="输入新密码" style="width: 150px;" show-password></el-input>
     <el-button type="primary" @click="handleSubmit">提交</el-button>
    </el-form-item>
  </el-form>
    </el-dialog>
    <el-dialog title="修改邮箱" :visible.sync="dialogEmailVisible">
      <el-form :model="form">
        <el-form-item label="邮箱" :label-width="formLabelWidth">
      <el-input v-model="form.email" autocomplete="off" style="width: 150px;"></el-input>
      <el-button type="primary" @click="handleEmail">提交</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import moment from "moment"
import { mapGetters } from 'vuex'
import {weatherList, amap} from '@/utils/gode'
import { querySingleUser,sendCode,resetPassword,resetEmail } from "@/api/user"
import { queryOrder } from "@/api/order"

export default {
  name: 'Dashboard',
  data(){
    return{
      tableLoading:true,
      orderInfo:[],
      sendLoading:false,
      dialogEmailVisible:false,
      form:{
        code:'',
        password:'',
        email:'',
      },
      verify:'',
      formLabelWidth: '120px',
      dialogPasswordVisible:false,
      userInfo:undefined,
      show:false,
      autoLocation:null,//根据IP获取地址
      weather:'',
      temperature:'',
      windDirection:'',
      windPower:'',
      humidity:'',
      reportTime:'',
      imgUrl:null,
      backgroundImg:require('@/assets/other/background06.png'),
      cardLoading:true,
      inputLocation:null,
      showLocation:null,
      dialogFormVisible:false,
      weatherinfo:[{date:'',dayWeather:'',dayTemp:'',nightWeather:'',nightTemp:'',dayWindDir:'',dayWindPower:''}]
    }
  },
  mounted(){
    setTimeout(() => {
      amap("b3f8bb47b6e5b66c76214320c75e2d12").then((amap) => {
      this.getCityLoaction(amap) //这个amap就是高德的地图对象Map
      });
    }, 1000);
    querySingleUser({username:this.name}).then(response =>{
      this.userInfo=response.data.data
    })
    queryOrder({username:this.name,passenger_card:'',order_status:'已付款'}).then(response =>{
      this.orderInfo=response.data.data
      this.tableLoading=false
    })
  },
  computed: {
    ...mapGetters([
      'name',
      'avatar',
    ])
  },
  methods:{
    seatDetail(c_no,s_no){
        if(c_no==='1'||c_no==='2'){
            if(s_no%2===0){
                return (s_no/2)+"排B座"
            }
            else{
                return (parseFloat(s_no/2).toFixed(0))+"排A座"
            }
        }
        if(c_no ==='3' || c_no==='4'){
            if(s_no%3===0){
                return (s_no/3)+"排C座"
            }
            else if(s_no%3===2){
                return (parseInt(s_no/3)+1)+"排B座"
            }
            else{
                return (parseInt(s_no/3)+1)+"排A座"
            }
        }
        if(c_no === '5' || c_no === '6' || c_no === '7' || c_no === '8'){
            if(s_no%5===0){
                return (s_no/5)+"排E座"
            }
            else if(s_no%5===4){
                return (parseInt(s_no/5)+1)+"排D座"
            }
            else if(s_no%5===3){
                return (parseInt(s_no/5)+1)+"排C座"
            }
            else if(s_no%5===2){
                return (parseInt(s_no/5)+1)+"排B座"
            }
            else if(s_no%5===1){
                return (parseInt(s_no/5)+1)+"排A座"
            }
        }
        },
    handleEmail(){
      if(this.form.email==''){
        this.$notify({
          title: '警告',
          message: '邮箱不能为空！',
          type: 'warning'
        });
      }
      else{
        resetEmail({email:this.form.email}).then(response =>{
          this.dialogEmailVisible=false
          this.$notify({
            title: '成功',
            message: '邮箱修改成功,新邮箱为：'+response.data.data,
            type: 'success'
          });
        })
      }
    },
    handleSubmit(){
      if(this.form.code==''||this.form.password==''){
        this.$notify({
          title: '警告',
          message: '验证码和新密码不能为空！',
          type: 'warning'
        });
      }
      else{
        if(this.form.code!=this.verify){
          this.$notify.error({
          title: '失败',
          message: '验证码错误',
        });
        }
        else{
          
          resetPassword({username:this.name,password:this.form.password}).then(response =>{
            //this.dialogPasswordVisible=flase
            console.log("#####")
            this.$notify({
            title: '成功',
            message: '密码修改成功,新密码为：'+response.data.data+',请注意保存！',
            type: 'success'
          })
          })
        }
      }
    },
    handleCode(){
      sendCode({email:this.userInfo[0].email}).then(response =>{
        this.sendLoading=true
        this.verify=response.data.data
        this.$notify({
          title: '成功',
          message: '验证码已经发送到了邮箱：'+this.userInfo[0].email+"请注意查收！",
          type: 'success'
        });
        setTimeout(() => {
        this.sendLoading = false;
      }, 60000);
      })
    },
    go(){this.$router.push({name:"Mychart"})},
    isshow(){
      this.dialogFormVisible=true
    },
    findLW(){
      this.cardLoading=true
      this.show=false
      setTimeout(() => {
      amap("b3f8bb47b6e5b66c76214320c75e2d12").then((amap) => {
      this.getCityWeather(amap,this.autoLocation) //这个amap就是高德的地图对象Map
      });
    }, 1000);
    setTimeout(()=>{
        this.showLocation=this.autoLocation
        this.cardLoading=false
      },2000)
    },
    findWeather(){
      this.cardLoading=true
      this.show=false
      if(this.inputLocation===null){
        this.$message("请输入查询地") 
      }
      else{
      setTimeout(() => {
      amap("b3f8bb47b6e5b66c76214320c75e2d12").then((amap) => {
      this.getCityWeather(amap,this.inputLocation) //这个amap就是高德的地图对象Map
      });
    }, 1000);
      }
      
      setTimeout(()=>{
        this.showLocation=this.inputLocation
        this.cardLoading=false
      },2000)
      
    },
    getCityLoaction(MAP){
    var citysearch=new MAP.CitySearch();
    citysearch.getLocalCity((status,result) => {
    if(status==="complete"&&result.info ==="OK"){
    this.autoLocation=result.city.substring(0,result.city.length-1)
    this.showLocation=result.city.substring(0,result.city.length-1)
    this.getCityWeather(MAP,result.city)
  }
    });
    },
    getCityWeather(MAP,province){
      //创建天气查询实例
    var cityWeather=new MAP.Weather
    // 执行实时天气查询
    cityWeather.getLive(province,(err,data) =>{
      this.weather=data.weather
      this.temperature=data.temperature
      this.windDirection=data.windDirection
      this.windPower=data.windPower
      this.humidity=data.humidity
      this.reportTime=data.reportTime
      //根据不同的天气换用不同的背景图片
      if(this.weather.includes("云")||this.weather.includes("阴")){
        var timepoint=moment().format('YYYY-MM-DD')
        if(moment(this.reportTime).isBefore(timepoint+" 18:00:00")){
          this.backgroundImg=require('@/assets/other/background03.png')
        }
        else{
          this.backgroundImg=require('@/assets/other/background06.png')
        }
      }
      
      else if(this.weather.includes("雨")){
        if(this.weather.includes("雪")){
          this.backgroundImg=require('@/assets/other/background05.png')
        }
        else if(this.weather.includes("雷")){
          this.backgroundImg=require('@/assets/other/background02.png')
        }
        else{
          this.backgroundImg=require('@/assets/other/background01.png')
        }
      }
      else if(this.weather.includes("雪")){
        this.backgroundImg=require('@/assets/other/background05.png')
      }
      else{

        var timepoint=moment().format('YYYY-MM-DD')
        if(moment(this.reportTime).isBefore(timepoint+" 18:00:00")){
          this.backgroundImg=require('@/assets/other/background04.png')
        }
        else{
          this.backgroundImg=require('@/assets/other/background06.png')
        }
      }
      weatherList.forEach(el => {
                if (el.name === this.weather) {
                 this.imgUrl = el.url
                }
              });
              this.cardLoading=false
              this.show=true
  })
  //获得最近几天的天气预报信息
    cityWeather.getForecast(province,(err,data) =>{
        this.weatherinfo=data.forecasts
      })
    },
  }
  
}
</script>

<style lang="scss" scoped>
.component-item{
  min-height: 100px;
}
 .el-icon-search:hover{
  color:#409eff
 }
.image {
    width: 15%;
    display: block;
    margin-left: 25px;
  }

.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
